/*! diaboscroll v 0.1 ~ (c) 2014 Dingoogle */
(function (window, document, Math) {
	var defaults = {
		startAt: 0,
		duration: 400,
		offsetNum: 10,
		verticalAlign: 'middle'
	};
	/**
	 * get the usable transition style and relevant event
	 * if the browser supports none of them
	 * return false
	 */
	var usableEvent = (function(){
		var elStyle = document.createElement("div").style,
			transEventMap = {
				'-webkit-transition': 'webkitTransitionEnd',
				'transition': 'transitionend',
				'-o-transition': 'oTransitionEnd',
				'-ms-transition': 'msTransitionEnd'
			};		
		for(var itm in transEventMap){
			if(itm in elStyle)
			{
				return {
					"cssName":itm,
					"eventName": transEventMap[itm]
				}
			}
		}
		return false;
	})();
	var hasTouch = 'ontouchstart' in window;
	
	var utils = {
		getChildElement: function(els){
			var chldrn = [];
			for(var itm in els){
				if (els[itm].nodeType == 1){
					chldrn.push(els[itm]);
				}
			}
			return chldrn;
		},
		extend: function (target, obj) {
			for ( var i in obj ) {
				target[i] = obj[i];
			}
		}
	}
	
	
	function DiaboSlider (el, options) {
		
		options = options || {};
		var initialized = false;
		var self = this;
		var dslider = {};
		
		this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
		this.scroller = dslider.scroller = utils.getChildElement(this.wrapper.children)[0];
		
		this.init = function(){
			dslider.children = [];
			utils.extend(options, defaults)
			initialized = false;
			dslider.children = utils.getChildElement(dslider.scroller.children);
			//console.log("dslider.children", dslider.children)
			if(!dslider.children.length)
				return;
	
			dslider.itemSize = {width:dslider.children[0].offsetWidth, height:dslider.children[0].offsetHeight};
			dslider.wrapperSize = {width:self.wrapper.clientWidth, height:self.wrapper.clientHeight}; 

			self.currentIndex = options.startAt || 0;
			for(var i=0;i<dslider.children.length;i++){
				dslider.children[i].setAttribute("data-index", i)
				dslider.children[i].addEventListener("click", function(e){
					dslider.currentIndex = e.target.getAttribute("data-index")*1;
					dslider.selectedElement = e.target;
					updateSelectedItem(dslider.currentIndex);
						
				})
			}
			//updateSelectedItem(self.currentIndex);
			initialized = true;
		}
		
		var updateSelectedItem = function(index){
			console.log("select: " + index)
			for(var i=0;i<dslider.children.length;i++){
				dslider.children[i].setAttribute("class", "")
			}
			dslider.children[index].setAttribute("class", "active");
			var evt = document.createEvent('CustomEvent'); 
			//console.log("click: ", dslider.selectedElement)
			evt.initEvent("selectedUpdate", true, true);
			evt.eventType = 'message';  
			evt.selectedIndex = dslider.currentIndex || 0;	
			evt.selectedElement = dslider.selectedElement;
			self.wrapper.dispatchEvent(evt);
		}
		
		/**
		 * add event listeners for touch events
		 * add "touchstart","touchmove" and "touchend" event handlers
		 */
		var addTouchEventListener = function(){			
			//dslider.scroller.addEventListener(hasTouch?"touchstart":"mousedown", touchStartHandler);
			
		}
		
		/**
		 * remove event listeners for touch events
		 * remove "touchstart","touchmove" and "touchend" event handlers in case they has been added
		 */
		var removeTouchEventListener = function(){	
			//dslider.scroller.removeEventListener(hasTouch? "touchstart": "mousedown", touchStartHandler);			
		
		}
		/**
		 * event handler of "touchstart"
		 * @param value (event)
		 *  - the event of touchstart
		 */
		
		
		var startup = function(){
			self.init();
			self.wrapper.scrollTop = 0;
			if(!initialized)
				return;

		}
		
		this.refresh = function(){
			//removeShadowItems();
			removeEventListener();
			dslider.initialized = false;
			dslider.children = [];
			//console.log("refresh this", dslider)
			self.currentIndex = dslider.currentIndex = options.startAt;
			startup();
		}
		startup();
	};
	
	DiaboSlider.prototype = {
		version: "0.1.0"		
	};
	DiaboSlider.prototype.bind = function(eventType, func){
		this.wrapper.addEventListener(eventType, func);
	};
	DiaboSlider.prototype.refresh = function(){
		this.refresh();
	};
	
	if ( typeof module != 'undefined' && module.exports ) {
		module.exports = DiaboSlider;
	} else {
		window.DiaboSlider = DiaboSlider;
	}
})(window, document, Math);